<template>
	<div class="w1024 page">
		<div class="tabs clear">
			<p class="tab-item" >详情</p>
			<el-button size="small" class="right" style="margin-top: 14px;" type="primary" @click="$router.go(-1)">返回</el-button>
		</div>
		<div class="page-main">
			<div class="block" style="border-bottom: 1px solid #eee;">
				<p class="block-title">退款信息</p>
				<div class="clear">
					<p class="info-item"><span>客户姓名：</span>{{obj.customername||'-'}}</p>
					<p class="info-item"><span>集团名称：</span>{{obj.companyname}}</p>
					<p class="info-item"><span>退款产品：</span>{{obj.isring==1?'企业彩铃':'视频彩铃'}}</p>
					<p class="info-item"><span>退款金额：</span>{{obj.refund/100}}元</p>
				</div>
			</div>
			<div class="block">
				<p class="block-title">审核信息</p>
				<div style="margin-top: 14px;padding-bottom: 20px;">
					<p class="no-data" v-if="!auditHistory.length">暂无记录</p>
					<div class="record-item" v-for="item in auditHistory">
						<span class="split-line"></span>
						<span class="circle"></span>
						<div class="record-content clear">
							<span>{{item.username+item.note}}</span><span>{{item.updatetime}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	import {baseUrl} from '@/utils/common'
	export default {
		name: 'MaterialDetail',
		data() {
			return {
				baseUrl,
				tabIndex: 0,
				crmrefunduid:this.$route.params.crmrefunduid,
				obj: {},
				auditHistory: [],
			}
		},
		mounted() {
			this.queryAuditDetail()
			this.queryAuditHistory()
		},
		methods: {
			queryAuditDetail(){
				this.$request.queryAuditDetail({
					crmrefunduid:this.crmrefunduid
				}).then(res=>{
					if(res.code==0){
						this.obj=res
					}
				})
			},
			queryAuditHistory(){
				this.$request.queryAuditRecord({
					crmrefunduid:this.crmrefunduid
				}).then(res=>{
					if(res.code==0){
						this.auditHistory=res.list||[]
					}
				})
			},
			
		}
	}
</script>

<style scoped="" lang="scss">
	.page {
		background: transparent;
		.tabs {
			background: #fff;
			margin-bottom: 2px;
			padding:0 26px;
			.tab-item {
				width: 40px;
				height: 60px;
				margin-right: 20px;
				line-height: 60px;
				font-size: 16px;
				color: #333;
				text-align: center;
				float: left;
				cursor: pointer;
			}
		}
		.page-main {
			padding: 0 20px;
			background: #fff;
			.block {
				padding-left: 40px;
				padding-top: 20px;
				padding-bottom: 20px;
				color: #333;
				text-align: left;
				.block-title {
					line-height: 41px;
					font-size: 16px;
					font-weight: bold;
				}
				.block-sub-title {
					color: #666;
				}
				.info-item {
					float: left;
					width: 32%;
					line-height: 39px;
					font-size: 14px;
					span {
						&:first-child {
							padding-right: 8px;
						}
					}
				}
				
				.record-item {
					padding-left: 40px;
					padding-bottom: 22px;
					line-height: 19px;
					position: relative;
					color: #666;
					font-size: 14px;
					.split-line {
						width: 2px;
						position: absolute;
						bottom: 0;
						top: 0;
						left: 4px;
						background: #0088EA;
					}
					.circle {
						width: 10px;
						height: 10px;
						border: 2px solid #0088EA;
						border-radius: 50%;
						position: absolute;
						left: 0;
						top: 0;
						background: #fff;
					}
					.record-content {
						transform: translateY(-4px);
						min-height: 19px;
						span {
							width: 240px;
							float: left;
							word-break: break-all;
						}
					}
					&:last-child {
						.split-line {
							background: #C9C9C9;
						}
						&:after {
							content: '';
							width: 6px;
							height: 6px;
							border: 2px solid #C9C9C9;
							border-radius: 50%;
							position: absolute;
							bottom: -10px;
							left: 0;
						}
					}
				}
				.no-data{
					text-align: left;
					font-size: 16px;
					color: #999;
				}
			}
		}
	}
</style>